<template>
   <div ref="box" class="box"></div>
</template>
<script lang='ts' setup>
  import * as echarts from 'echarts'
  import {ref,reactive,computed,onMounted} from 'vue'
  const data=reactive({
    ydata:[10,20,30,40,50,78]
  })
  const options=computed(()=>{
    return{
      title:{
        text:'某公司前半年销售业绩'
      },
      xAxis:{
        data:['1月','2月','3月','4月','5月','6月']
      },
      yAxis:{},
      series:[
        {
          type:'bar',
          data:data.ydata
        }
      ]
    }
  })
  const box=ref<HTMLElement>()
  onMounted(()=>{
     let chart=echarts.init(box.value)
     chart.setOption(options.value)
     console.log('options',options.value);
     
    
  })

</script>
<style lang='scss' scoped>
.box{
  width: 500px;
  height: 300px;
  background-color: #ccc;
}
</style>